<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="codelover">
        <van-nav-bar title="Vue3课程成绩" />
        <form action="/">
            <van-search v-model="search" show-action placeholder="搜索" @search="onSearch" />
        </form>
        <van-dropdown-menu>
            <template #title>
                <van-cell title="全部课程" is-link />
            </template>
            <van-dropdown-item v-model="value1" :options="option1" />
        </van-dropdown-menu>

        <van-dropdown-menu>
            <template #title>
                <van-cell title="全部班级" is-link />
            </template>
            <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>
        <div v-for="(item, index) in filterTasks" :key="index" class="task-item">
            <van-cell :title="item.task" class="task-title">
                <template #right-icon>
                    <van-tag plain type="danger">{{ item.status }}</van-tag>
                </template>
            </van-cell>
            <div class="task-details">
                <div class="task-class-weight">
                    <span>班级：{{ item.class }}</span>
                    <span>权重：{{ item.weight }}%</span>
                </div>
                <van-button size="small" type="default" @click="handleVisitLink(item.link)">访问链接</van-button>
            </div>
        </div>
    </div>
</template>
<script>
import { ref, computed } from "vue";
import {
    NavBar,
    Search,
    Cell,
    DropdownMenu,
    DropdownItem,
    Tag,
    Button,
} from "vant";

export default {
    components: {
        [NavBar.name]: NavBar,
        [Search.name]: Search,
        [Cell.name]: Cell,
        [DropdownMenu.name]: DropdownMenu,
        [DropdownItem.name]: DropdownItem,
        [Tag.name]: Tag,
        [Button.name]: Button,
    },
    setup() {
        const searchQuery = ref("");
        const search = ref("");
        const value1 = ref("");
        const value2 = ref("");
        const option1 = [
            { text: "全部课程", value: "" },
            { text: "任务1", value: "任务1" },
            { text: "任务2", value: "任务2" },
        ];
        const option2 = [
            { text: "全部班级", value: "" },
            { text: "22软件技术1班", value: "22软件技术1班" },
            { text: "22软件技术3班", value: "22软件技术3班" },
        ];
        const tasks = ref([
            {
                task: "任务1",
                class: "22软件技术1班",
                status: "已提交",
                weight: 50,
            },
            {
                task: "任务1",
                class: "22软件技术3班",
                status: "已提交",
                weight: 50,
            },
            {
                task: "任务2",
                class: "22软件技术1班",
                status: "未提交",
                weight: 50,
            },
            {
                task: "任务2",
                class: "22软件技术3班",
                status: "未提交",
                weight: 50,
            },
        ]);
        const filterTasks = computed(() => {
            if (value1.value && value2.value) {
                return tasks.value.filter(
                    (item) => item.task === value1.value && item.class === value2.value
                );
            } else if (value1.value) {
                return tasks.value.filter((item) => item.task === value1.value);
            } else if (value2.value) {
                return tasks.value.filter((item) => item.class === value2.value);
            } else {
                return tasks.value;
            }
        });
        // eslint-disable-next-line no-unused-vars
        const handleVisitLink = (link) => {
            alert("还未交作业请尽快！");
        };
        const onSearch = (query) => {
            searchQuery.value = query;
            const filteredTasks = tasks.value.filter((item) =>
                item.task.toLowerCase().includes(query.toLowerCase())
            );


            tasks.value = filteredTasks;
        };

        return {
            search,
            searchQuery,
            value1,
            value2,
            option1,
            option2,
            tasks,
            handleVisitLink,
            filterTasks,
            onSearch,
        };
    },
};
</script>
<style>
.codelover {
    background-color: #f4f7fc;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.van-nav-bar {
    color: #dfdfdf;
}

form {
    margin-bottom: 20px;
}

.van-search {
    background-color: #fff;
    border-radius: 20px;
}

.van-dropdown-menu {
    margin-bottom: 20px;
}

.task-item {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.task-title {
    font-size: 16px;
    color: #1890ff;
}

.task-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 10px;
}

.task-class-weight {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: #666;
    margin-bottom: 10px;
}

.van-button {
    background-color: #1890ff;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 14px;
}
</style>
